import React, { Component, PureComponent } from 'react';
import { StyleSheet, Text, View, Button, DeviceEventEmitter } from 'react-native';
import { createStackNavigator } from 'react-navigation-stack';

import index from './index';
import toast from './01-toast';
import layout from './02-layout';
import nav from './03-navigation';
import customNavBar from './04-customNavigationBar';
import customNavBar1 from './05-customNavigationBar';

const defaultNavigationOptions = {
  // headerShown: false,
  // header: <View style={{backgroundColor: 'yellow'}}><Text>My Title</Text></View>,
  headerBackTitleVisible: false,
  // headerBackground: <View style={{backgroundColor: 'yellow'}}></View>,
  headerStyle: {backgroundColor: '#0066FF', opacity: 1},
  // headerTransparent: true,
}

const AntDStack = createStackNavigator(
  {
    index: {
      screen: index,
      navigationOptions: {
        headerShown: false,
      }
    },
    toast: {
      screen: toast,
      navigationOptions: {
        title: 'Toast Demo',
      }
    },
    layout: {
      screen: layout,
      navigationOptions: {
        title: 'LAYOUT',
      }
    },
    nav: {
      screen: nav,
      navigationOptions: {
        title: 'NAVIGATION',
      }
    },
    customNavBar: {
      screen: customNavBar,
      navigationOptions: {
        title: 'CUSTOM NAVIGATION BAR',
        headerShown: false,
      },
    },
    customNavBar1: {
      screen: customNavBar1,
      navigationOptions: {
        title: 'CUSTOM NAVIGATION BAR',
        // headerShown: false,
        // cardStyle: {backgroundColor: 'yellow'},
      },
    },
  },
  {
    initialRouteName: 'index',
    defaultNavigationOptions,
  },
);

export default AntDStack;
